<template>
  <div>
<!--    回到顶端按钮-->
    <img id="top" v-if="isTopShow" src="../../assets/imgs/top.png"  alt="" @click="goTop">
<!--  顶部导航栏区域-->
<div class="sn">
  <p class="sn-login-info">
    <em>欢迎来到小王商城</em>
    <a   @click="toLogin"  class="sn-login">请登录</a>
    <a @click="toReg" class="sn-register">免费注册</a>
  </p>
  <ul class="sn-quick-menu">
    <li  class="sn-myshop">
      <a  @click="toMyShop">我的商城</a>
      |
    </li>
    <li class="sn-mycart">
    <a  @click="toCart">我的购物车</a>
      |
  </li>
    <li class="sn-myphone">
      <a href="#">手机版</a>
      |
    </li>
    <li class="sn-nav">
      <a >网站导航</a>
      |
    </li>
  </ul>
</div>
<!--icon和搜索区域-->
    <div class="shopicon">
      <img src="../../assets/imgs/favicon1.png" alt="">
    </div>
    <div class="search">
      <label>
       <input class="search-input" type="text"/><button class="search-button" type="submit">搜索</button>
      </label>
    </div>
<!--左侧商品分类栏-->
    <div class="menu">
      <div class="menubar">
        <i class="el-icon-menu"></i>
        商品分类
      </div>
    </div>
      <div class="line"></div>
      <div class="contentmenu">
        <ul v-for="(item ,i ) in cateList" :key="i">
          <li @mouseenter="showContentById(item.cat_id)" @mouseleave="closeContentById"><i :class="iconObj[i]"></i>{{item.cat_name}}/</li>
        </ul>
      </div>
<!--按照id显示商品的对话框-->
<div class="goods" v-if="isShowGoods" @mouseenter="isShowGoods=true" @mouseleave="isShowGoods=true">
  <el-table :data="goodsList" element-loading-text="拼命加载中. . ." stripe>
    <el-table-column>
<!--  <template slot-scope="scope">-->
    <el-row  v-for="(item1, i1) in goodsList" :key="i1">
      <!-- 渲染一级权限 -->
      <el-col>
<!--        <p>{{item1.cat_name}}</p>-->
<!--        <i class="el-icon-caret-right"></i>-->
      </el-col>
      <!-- 渲染二级和三级权限 -->
      <el-col :span="19">
        <!-- 通过 for 循环 嵌套渲染二级权限 -->
        <el-row  v-for="(item2, i2) in item1.children" :key="i2">
          <el-col :span="6">
            <p >{{item2.cat_name}}</p>
<!--            <i class="el-icon-caret-right"></i>-->
          </el-col>
          <el-col :span="18">
            <p
              v-for="(item3,i3) in item2.children"
              :key="i3"
            >{{item3.cat_name}}</p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
<!--  </template>-->s
    </el-table-column>
  </el-table>
</div>
<!--下一栏商品区域-->
    <div class="goods-line">小王超市XWANG.MART</div>
    <div class="line1">
      <div class="line1_good" v-for="(item ,i ) in goodList3" :key="i" @click="showGoodsDetail(item.goods_id)" >
        <div class="line1_shop_pic">
          <img :src="item.pics[0].pics_big_url"  alt="">
        </div>
        <div class="line1_shop_des">
          <div class="line_shop_des_name">{{item.goods_name}}</div>
          <div class="line_shop_des_price">{{item.goods_price | finalPrice}}</div>
        </div>
      </div>
    </div>
<!--   下两栏商品区域-->
    <div id=""></div>
    <!--    下三栏区域-->
    <div class="line3">
      <img src="../../assets/imgs/header.jpg" alt="">
    </div>
<!--   底部信息栏区域-->
    <div class="container footer">
      <div class="span24">
        <div class="footerAd">
          <img src="../../assets/imgs/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950">
        </div>
      </div>
      <div class="span24">
        <ul class="bottomNav">
          <li>
            <a >关于我们</a>
            |
          </li>
          <li>
            <a >联系我们</a>
            |
          </li>
          <li>
            <a >诚聘英才</a>
            |
          </li>
          <li>
            <a >法律声明</a>
            |
          </li>
          <li>
            <a>友情链接</a>
            |
          </li>
          <li>
            <a target="_blank">支付方式</a>
            |
          </li>
          <li>
            <a target="_blank">配送方式</a>
            |
          </li>
          <li>
            <a >SHOP++官网</a>
            |
          </li>
          <li>
            <a>SHOP++论坛</a>

          </li>
        </ul>
      </div>
      <div class="span24">
        <div class="copyright">Copyright © 2005-2020 小王商城 版权所有</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //  获取的商品分类绑定的对象
      cateList: {},
      //  获取商品分类
      queryInfo: {
        type: 3,
        pagenum: '',
        pagesize: '10000'
      },
      goodsQueryInfo: {
        query: '',
        pagenum: '1',
        pagesize: '1000'
      },
      //  回到顶部
      isTopShow: false,
      //  是否展示商品列表
      isShowGoods: false,
      //  被选中的商品列
      goodsList: [],
      //  左侧菜单栏图标
      iconObj: [
        'iconfont  icon-Householdappliances',
        'iconfont  icon-hot',
        'iconfont  icon-haiwaigou',
        'iconfont  icon-company',
        'iconfont  icon-ipad',
        'iconfont  icon-diannao',
        'iconfont  icon-dianqi',
        'iconfont  icon-jiu',
        'iconfont  icon-tapp-specials-6',
        'iconfont  icon-Householdappliances',
        'iconfont  icon-dianqi',
        'iconfont  icon-guojiajiankangyiliao',
        'iconfont  icon-pengren-',
        'iconfont  icon-color',
        'iconfont  icon-naifen',
        'iconfont  icon-apparel',
        'iconfont  icon-dfdf05',
        'iconfont  icon-bussiness-man',
        'iconfont  icon-nvxie',
        'iconfont  icon-auto',
        'iconfont  icon-sport',
        'iconfont  icon-beauty',
        'iconfont  icon-peishi',
        'iconfont  icon-wanju',
        'iconfont  icon-zhubao',
        'iconfont  icon-zhineng',
        'iconfont  icon-Icon_huabanfuben',
        'iconfont  icon-pijuxiangbao',
        'iconfont  icon-leqi',
        'iconfont  icon-Non-staplefood'
      ],
      //  获取的所有推荐商品数据绑定列表
      goodList: {},
      //  下一栏商品绑定的数据
      goodList1: {},
      //  带图片的30个热销产品
      goodList2: [],
      //  下一栏的商品数据
      goodList3: [],
      //  下两栏的商品数据
      goodList4: []
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    document.removeEventListener('scroll', this.handleScroll)
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  created () {
    this.getCateList()
  },
  //  自定义filter函数，用{{ 参数 | 方法() }} 的方式调用
  filters: {
    finalPrice(price) {
      return '¥ ' + price.toFixed(2, 0)
    }
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories/', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        // return this.$message.error('获取商品分类失败！')
        return
      }
      // this.$message.success('获取商品分类列表成功！')
      this.cateList = res.data
      this.getGoodsList()
      // console.log(res.data)
    },
    //  根据id显示对性的内容
    async showContentById(id) {
      // console.log(id)
      this.isShowGoods = true
      for (let i = 0; i < this.cateList.length; i++) {
        if (this.cateList[i].cat_id === id) {
          this.goodsList.push(this.cateList[i])
        }
      }
      // console.log(this.goodsList[0].children.length)
    },
    //  根据id展示商品的详细信息
    showGoodsDetail(i) {
      console.log(i)
      this.$router.push({
        path: '/goods_detail',
        query: {
          id: i
        }
      })
    },
    //  关闭选项时的操作
    closeContentById() {
      this.goodsList = []
      // this.isShowGoods = false
    },
    //  回到top
    goTop() {
    },
    //  跳转登陆功能
    toLogin() {
      this.$router.push('/shop_login')
    },
    //  跳转登陆功能
    toReg() {
      this.$router.push('/shop_register')
    },
    //  跳转商城功能
    toMyShop() {
      this.$router.push('/shop_myshop')
    },
    toCart() {
      this.$router.push('/cart')
    },
    //  获取下面栏的商品
    async getGoodsList() {
      const { data: res } = await this.$http.get('goods', { params: this.goodsQueryInfo })
      if (res.meta.status !== 200) {
        // return this.$message.error('获取商品失败！')
        return
      }
      console.log(res.data.goods)
      // this.$message.success('获取商品成功！')
      this.goodList = res.data.goods.filter(n => n.is_promote === true)
      this.goodList1 = this.goodList.slice(0, 30)
      // console.log(this.goodList1)
      for (let item of this.goodList1) {
        // console.log(item.goods_name)
        const { data: res } = await this.$http.get(`goods/${item.goods_id}`)
        if (res.meta.status !== 200) {
          // return this.$message.error('获取商品的图片失败！')
          return
        }
        // this.$message.success('获取商品的图片成功！')
        this.goodList2.push(res.data)
        this.goodList3 = this.goodList2.slice(0, 10)
        this.goodList4 = this.goodList2.slice(11, 20)
      }
      console.log(this.goodList2)
    }
  }
}
</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei,serif,tahoma;
    /*background-color: #f1f1f1;*/
    >em{
      font-style: normal;
      color: rgb(255,0,54);
      margin: auto;
    }
  }
  .sn{
    font-size: 14px;
    height: 32px;
    width: 100%;
    background-color: #f1f1f1;
    line-height: 32px;
    position: relative;
    >.sn-login-info{
      display: inline-block;
      >em{
        font-style: normal;
        margin: 0 10px;
      }
    }
    >.sn-login,.sn-register{
      margin:0 10px 0 ;
      cursor: pointer;
    }
    >.sn-quick-menu{
      position: relative;
      /*float: right;*/
      display: inline;
      clear: both;
      float: right;
      right: 50px;
      cursor: pointer;
      >li{
        clear: both;
        display: inline;
        margin: 0 10px;
        right: 10px;
        /*position:absolute;*/
      }
    }
  }
  .sn-quick-menu>li>a:hover,.sn-login:hover,.sn-register:hover{
    color: rgb(255,0,54);
  }
  .shopicon{
    width: 390px;
    height: 130px;
    /*background-color: red;*/
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: 20px;
    line-height: 130px;
    >img{
      height: 100%;
    }
  }

  .search{
    font-size: 0;
    display: inline-block;
    width: 76%;
    float: right;
    position: absolute;
    line-height: 130px;
    margin-top: 20px;
    /*background-color: cyan;*/
    /*margin: 20%;*/
  }
  .search-input{
    width: 38%;
    height: 32px;
    line-height: 36px;
    border: 2px solid rgb(255,0,54);
    outline: none;
    font-size: 16px;
    position: relative;
    top: 2px;
    padding: 2px 2px 2px 8px;
  }

  .search-button{
    line-height: 36px;
    width: 10%;
    height: 40px;
    font-size: 18px;
    color: #ffffff;
    border: 2px solid rgb(255,0,54);
    top: 3px;
    position: relative;
    background-color: rgb(255,0,54);
    outline: none;
    margin: 0;
    padding: 0;
  }
  .search-button:after{
    border: none;
  }
  .menu{
    /*height: 400px;*/
    margin-top: 30px;
    width: 16%;
    background-color: #696969;
    >.menubar{
    background-color: rgb(255,0,54);
      height: 36px;
      text-align: center;
      color: #ffffff;
      line-height: 36px;
    }
  }
  .contentmenu{
    width: 16%;
    background-color: #696969;
    opacity: 0.4;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    >ul>li{
      cursor: pointer;
      padding-top: 5px;
    }
    >ul>li:hover{
      background-color: #ffffff;
      color: #0086b3;
    }
  }
  #top{
    position: absolute;
    right: 80px;
    bottom: 80px;
  }
  .goods{
    height: 600px;
    width: 1000px;
    position:absolute;
    float: right;
    display: inline-block;
    /*overflow: hidden;*/
    /*background: url("../../assets/imgs/s13.jpg");*/
  }
  .el-col{
    border: 1px solid red;
    margin: 0;
    padding: 0;
  }
  .el-table{
    margin: 0 !important;
    padding: 0 !important;
    >.el-table-column{
      margin: 0;
      padding: 0;
    }
  }

  .goods-line{
    width: 214px;
    height: 25px;
    line-height: 25px;
    background-color: #1AB165;
    color: #ffffff;
    font-size: 16px;
    position: relative;
    top: 20px;
    left: 10px;
    border: none;
    margin-bottom: 30px;
    text-align: center;
  }
  .line1{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
    overflow: hidden;
    flex-wrap: wrap;
    background: #f1f1f1;
    margin-bottom: 20px;
    >.line1_good{
      width: 236px;
      height: 302px;
      background: white;
      display: flex;
      /*flex-direction: row;*/
      flex-wrap: wrap;
      justify-content: center;
      /*align-items: start;*/
      margin: 5px 5px 5px 5px ;
      text-align: center;
      >.line1_shop_pic{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 185px;
        height: 185px;
        margin-top: 10px;
        background: #000;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      .line1_shop_des{
        width: 135px;
        height: 58px;
        margin-bottom: 10px;
        >.line_shop_des_name {
          width: 135px;
          height: 40px;
          overflow: hidden;
        }
        >.line_shop_des_price{
          width: 135px;
          height: 18px;
          margin: 10px 0 10px 0;
          color: rgb(255,0,54);
          font-size: larger;
        }
      }
    }
  }
  .line3{
    >img{
      width: 100%;
    }
  }
  .container .span24 {
    width: 100%;
    margin-right: 0;
  }
  .footer .footerAd{
    text-align: center;
    /*position: relative;*/
    /*top: 30px;*/
  }
  .footer .bottomNav {
    margin-bottom: 10px;
    text-align: center;
  }
  .footer .bottomNav li {
    line-height: 26px;
    display: inline;
  }
  .footer .bottomNav a {
    margin: 0 10px;
  }
  .footer .copyright {
    line-height: 30px;
    margin-bottom: 10px;
    color: #555555;
    text-align: center;
  }
  .bottomNav >li>a{
    cursor: pointer;
  }
</style>
